<template>
	<div v-show="showPicker">
		<view class="uni-padding-wrap" >
			<button class="confirm button mini-btn" type="primary" @click="confirm">确定</button>
			<button class="cancel button mini-btn"  type="warn" @click="cancel">取消</button>
		</view>
		<picker-view  ref="picker" :value="selectedValues" :indicator-style="indicatorStyle"
			@change="handlePickerChange" class="picker-view" @togglePicker="togglePicker">

			<picker-view-column>
				<view class="item" v-for="(item,index) in provinces" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in cities" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in districts" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				treeData: [], // 从接口获取的树状数据
				provinces: [], // 省份数据	  
				cities: [], // 城市数据
				districts: [], // 区域数据
				selectedValues:[0, 0, 0],
				province: "",
				citie: "",
				district: "",
				showPicker: false, // 控制 picker-view 的显示和隐藏
				indicatorStyle: `height: 50px;`

			};
		},
		props:["showPicker","selectedValue"],
		methods: {
			// 获取树状数据，假设接口名为 getTreeData
			async fetchTreeData() {
				try {
					const response = await this.$http.getArea();
					this.treeData = response.data.children;
					this.buildData();
				} catch (error) {
					console.error('Error fetching tree data:', error);
				}
			},
			buildData() {
				// 使用递归构建省、市、区域数据
				const provinces = this.buildProvinceData(this.treeData);
				this.provinces = provinces.map(province => province.name.toLowerCase());
				
				// 默认选择第一个省份
				this.loadCity(0);
			},
			buildProvinceData(data) {
				return data.filter(node => node.type === 1);
			},
			buildCityData(data) {
				return data.filter(node => node.type === 2);
			},
			buildDistrictData(data) {
				if(data==null){
					return [];
				}
				return data.filter(node => node.type === 3);
			},
			loadCity(selectedProvinceIndex) {
				// 加载当前省份下的城市和区域数据
				const selectedProvince = this.treeData[selectedProvinceIndex];
				const cities = this.buildCityData(selectedProvince.children);
				this.cities = cities.map(city => city.name.toLowerCase());				
				this.loadDistrictData(selectedProvinceIndex, 0);
			},
			loadDistrictData(selectedProvinceIndex, selectedCityIndex) {
				// console.log(selectedProvinceIndex, selectedCityIndex)
				// 加载当前城市下的区域数据
				const selectedProvince = this.treeData[selectedProvinceIndex];
				const selectedCity = this.buildCityData(selectedProvince.children)[selectedCityIndex];
				const districts = this.buildDistrictData(selectedCity.children);
				this.districts = districts.map(district => district.name.toLowerCase());
				// console.log(this.districts)
				this.synData()
				
			},
			handlePickerChange(event) {
				// 处理 picker-view 值的变化
				const values = event.detail.value;
				this.selectedValues = values;
				
				// console.log(this.selectedValues) 
			},
			togglePicker() {
				// 切换 picker-view 的显示状态
				this.showPicker = !this.showPicker;
				// 如果显示 picker-view，则加载省份数据
				if (this.showPicker) {
					this.buildData();
				}
			},
			synData() {
				// console.log(this.selectedValues)
				this.province = this.provinces[this.selectedValues[0]];
				this.citie = this.cities[this.selectedValues[1]];
				this.district = this.districts[this.selectedValues[2]];
			},
			confirm() {
				// this.synData()
				var data = {}
				data.type="confirm"
				data.province = this.province
				data.citie = this.citie
				data.district = this.district
				data.selectedValues=this.selectedValues
				this.$emit("getData", data)
			},
			cancel() {
				var data = {}
				data.type="cancel"
				this.$emit("getData", data)
				
			}
		},
		mounted() {
			this.fetchTreeData(); // 页面加载时获取树状数据
		},
		watch: {
			// 监听 selectedValues 数组的变化
			selectedValues: {
				handler(newValues, oldValues) {
					// 更新当前选择的省份和城市
					if (newValues[0] != oldValues[0]) {
						this.selectedValues = [newValues[0], 0, 0]
						this.loadCity(newValues[0]);
						console.log("省", this.selectedValues)

					}
					if (newValues[1] != oldValues[1]) {
						this.selectedValues = [newValues[0], newValues[1], 0]
						this.loadDistrictData(newValues[0], newValues[1]);
						console.log("市", this.selectedValues)

					}
					if (newValues[2] != oldValues[2]) {
						this.selectedValues = [newValues[0], newValues[1], newValues[2]]
						console.log("区", this.selectedValues)
						this.synData()
					
					}

				},
				deep: false, // 深度监听数组变化
			},
			showPicker:{
				handler(newValues, oldValues) {
					console.log(111111,newValues, oldValues)
					
				}
			}
		},
	};
</script>

<style>
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.uni-padding-wrap {
		/* border: 1px solid red; */
		height: 20px;
		position: relative;
		padding: 5px 10px;


	}

	.uni-padding-wrap .button {
		height: 30px;
		line-height: 30px;
		/*  */
	}

	.confirm.button {
		float: left;
		/* border: 1px solid red; */
	}

	.cancel.button {
		float: right;
		border: 1px solid red;
	}
</style>